<template>
  <el-menu
      @open="handleOpen"
      @close="handleClose"
      :unique-opened="true"
      class="sidemenu"
      mode="horizontal"
  >
    <div class="menu-container">
      <!-- 左侧项目信息 -->
      <div class="left-section">
        <div class="project-info">
          <span class="project-name">{{ projectInfo.name }}</span>
          <el-tag size="small" :type="projectInfo.status === 'PUBLIC' ? 'success' : 'info'">
            {{ projectInfo.status === 'PUBLIC' ? '公开' : '私密' }}
          </el-tag>
        </div>
      </div>

      <!-- 右侧操作区 -->
      <div class="right-section">
        <!-- 布局操作 -->
        <el-submenu index="1">
          <template #title>
            <i class="el-icon-s-tools"></i>
            <span>布局设置</span>
          </template>
          <el-menu-item-group class="chilrden">
            <graph-layout
                :layoutMode="layoutMode"
                @graph-action="passingGraphAction"
            />
          </el-menu-item-group>
        </el-submenu>

        <!-- 图谱操作 -->
        <el-submenu index="2">
          <template #title>
            <i class="el-icon-edit"></i>
            <span>图谱操作</span>
          </template>
          <el-menu-item-group class="chilrden">
            <graph-actions
                @graph-action="passingGraphAction"
                @editor-action="passingEditorAction"
            />
          </el-menu-item-group>
        </el-submenu>

        <!-- 项目设置 -->
        <el-submenu index="4">
          <template #title>
            <i class="el-icon-setting"></i>
            <span>项目设置</span>
          </template>
          <el-menu-item-group class="chilrden">
            <el-button
                v-for="settingOption in settingOptions"
                :key="settingOption.label"
                type="info"
                style="margin-bottom: 10px; width: 100%"
                @click="settingOption.handler"
            >
              {{ settingOption.label }}
            </el-button>
          </el-menu-item-group>
        </el-submenu>

        <!-- 风险模拟 -->
        <el-submenu index="5">
          <template #title>
            <i class="el-icon-warning"></i>
            <span>风险模拟</span>
          </template>
          <el-menu-item-group class="chilrden">
            <el-button
                type="success"
                style="margin-bottom: 10px; width: 100%"
                @click="handleRiskSimulation('structuralRisk')"
            >
              开始模拟
            </el-button>
<!--            <el-button-->
<!--                type="info"-->
<!--                style="margin-bottom: 10px; width: 100%"-->
<!--                @click="handleRiskSimulation('environmentalRisk')"-->
<!--            >-->
<!--              环境风险-->
<!--            </el-button>-->
<!--            <el-button-->
<!--                type="warning"-->
<!--                style="margin-bottom: 10px; width: 100%"-->
<!--                @click="handleRiskSimulation('operationalRisk')"-->
<!--            >-->
<!--              运行风险-->
<!--            </el-button>-->
            <el-button
                type="danger"
                style="width: 100%"
                @click="exitRiskSimulation()"
            >
              退出模拟
            </el-button>
          </el-menu-item-group>
        </el-submenu>
      </div>
    </div>
  </el-menu>
</template>

<script>
import { buttonAutoBlur } from '@/common/utils'
import { mapGetters, mapActions, mapMutations } from 'vuex'
import GraphLayout from './GraphLayout'
import GraphActions from './GraphActions'

export default {
  name: 'GraphSideBar',
  props: {
    layoutMode: {
      type: String,
      default: 'FORCE',
    },
  },
  components: {
    GraphLayout,
    GraphActions,
  },
  data() {
    return {
      settingOptions: [
        {
          label: '修改项目名称',
          handler: () => this.changeName()
        },
        {
          label: '修改项目描述',
          handler: () => this.changeDesc()
        },
        {
          label: '修改项目权限',
          handler: () => this.changeStatus()
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['graphBoardMode', 'projectId']),
    projectInfo() {
      return this.$parent.projectInfo || {}
    }
  },
  methods: {
    ...mapMutations([
      'setShowModifyNameModal',
      'setShowModifyDescModal',
      'setShowModifyStatusModal'
    ]),
    ...mapActions(['switchLayoutMode', 'verifyInitiate', 'initiateGraph']),

    // 风险模拟传导信息
    handleRiskSimulation(riskType) {
      this.$emit('risk-simulation', riskType);
    },
    exitRiskSimulation() {
      this.$emit('exit-risk');
    },
    passingEmit(eventName, ...args) {
      this.$emit(eventName, ...args)
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath)
    },
    gotoSmarthelper(path) {
      const projectId = Number(this.$route.params.projectId)
      this.initiateGraph(projectId)
      this.verifyInitiate(projectId).then((res) => {
        if (res) {
          this.$router.push(`${path}/${projectId}`)
        } else {
          this.$router.push(`/graph/${projectId}`)
          this.$message.error('请先初始化图谱!')
        }
      })
    },
    passingGraphAction(...args) {
      this.passingEmit('graph-action', ...args)
    },
    passingEditorAction(...args) {
      this.passingEmit('editor-action', ...args)
    },
    initGraph() {
      const projectId = Number(this.$route.params.projectId)
      this.initiateGraph(projectId).then((res) => {
        const { success, msg } = res.data
        if (success) {
          this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      })
    },
    handlerDispatcher(e, handler) {
      buttonAutoBlur(e)
      handler()
    },
    changeName() {
      this.setShowModifyNameModal(true)
    },
    changeDesc() {
      this.setShowModifyDescModal(true)
    },
    changeStatus() {
      this.setShowModifyStatusModal(true)
    }
  }
}
</script>

<style scoped>
.sidemenu {
  width: 100%;
  height: auto;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

.menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 20px;
}

.left-section {
  display: flex;
  align-items: center;
  min-width: 250px;
}

.right-section {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 10px;
}

.project-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  height: 60px;
  margin-left: 100px;
  border-right: 1px solid #ebeef5;
}

.project-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidemenu .el-submenu {
  margin: 0 10px;
}

  .chilrden {
  padding: 5px;
  width: 200px;
  text-align: center;
}

.el-button + .el-button[style] {
  margin: 0;
}

.sidemenu .el-submenu__title {
  height: 100%;
  display: flex;
  align-items: center;
}

.sidemenu .el-menu--popup {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
}

:deep(.el-tag--small) {
  height: 22px;
  padding: 0 8px;
  line-height: 20px;
}
</style>
